<template>
    <div class="header">
        <el-row>
            <el-col :span="12" class="logo-container">
                <span class="iconfont icon-gouwu logo"></span>
                <span class="title">扶贫产品推广系统</span>
            </el-col>
            <el-col :span="12" class="user-container">
                <!-- 头像 -->
                <img :src="user.avator" alt="" class="avator">
                <div class="welcome">
                    <p class="name comename">你好</p>
                    <p class="name avatorname">{{user.username}}</p>
                </div>
                <!-- 下拉箭头 -->
                <el-dropdown trigger="hover" @command="showDetail">
                    <span class="el-dropdown-link">
                        <i style="color:#fff" class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="info">个人信息</el-dropdown-item>
                        <!-- divided 显示分割线 -->
                        <el-dropdown-item command="goCommon" divided>去购物</el-dropdown-item>
                        <el-dropdown-item command="logout" divided>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    computed: {
        user(){
            return this.$store.getters.user
        }
    },
    data() {
        return {

        }
    },
    methods: {
        // 下拉菜单选择
        showDetail(val){
            switch(val){
                case "info":
                    this.goUserInfo()
                break;
                case "logout":
                    this.logout()
                break;
                case "goCommon":
                    this.goCommon()
                break;
            }
        },
        // 用户详情信息
        goUserInfo(){
            
        },
        // 退出登录
        logout(){
            // 清除token
            localStorage.removeItem('tokenKey')
            // 清除vuex
            this.$store.dispatch('clearCurrentState')
            // 清除菜单
            localStorage.removeItem('by_menu')
            // 去登录
            this.$router.push('/login')
        },
        // 去购物页面
        goCommon(){
            this.$router.push('/common')
        }
    },
    created() {
        
    },
}
</script>
<style lang="less" scoped>
.header{
    width: 100%;
    height: 60px;
    padding: 5px;
    background: #00e28b;
    color: #fff;
    border-bottom: 1px solid #fff;
    overflow: hidden;
    .logo-container {
        padding-left: 20px;
        line-height: 60px;
        .logo{
            font-size:50px;
            vertical-align: middle;
        }
        .title {
            line-height: 60px;
            vertical-align: middle;
            padding-left: 10px;
            font-size: 25px;
            font-family: "Microsoft YaHei";
            letter-spacing: 3px;
        }
    }
    .user-container{
        line-height: 60px;
        text-align: right;
        float: right;
        padding-right: 20px;
        .avator {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            vertical-align: middle;
            display: inline-block;
        }
        .welcome {
            display: inline-block;
            width: auto;
            vertical-align: middle;
            padding: 0 5px;
            .name {
                line-height: 20px;
                text-align: center;
                font-size: 16px;
            }
            .comename {
                font-size: 14px;
            }
            .avatorname {
                color: #000;
                font-weight: bold;
            }
        }
        
    }
}
</style>